<script lang="ts" setup>
import { ref, useSlots, onMounted, nextTick,computed } from 'vue';
const slots = useSlots();

declare global {
    interface Window {
        WeixinJSBridge?: {
            call: (method: string) => void
        }
        AndroidCallBack?: {
            ClosedCustomKf: () => void
        }
        webkit?: {
            messageHandlers?: {
                ClosedCustomKf: {
                    postMessage: (data: string) => void
                }
            }
        }
    }
}

const props = defineProps({
    iTitle: {
        type: String,
        default: ''
    },
    iFontColor: {
        type: String,
        default: ''
    },
    iBgColor: {
        type: String,
        default: ''
    },
    leftArrow: {
        type: Boolean,
        default: false
    },
    iFixed: {
        type: Boolean,
        default: false
    },
    iFontSize: {
        type: String,
        default: "4.427vmin",
    },
    iBgImg: {
        type: String,
        default: ''
    },
    iResetyle: {
        type: Boolean,
        default: false
    }
});

//配置标题栏样式
const themeVars = computed(() => ({
    navBarTitleTextColor: props.iFontColor,
    navBarBackground: props.iBgColor,
    navBarIconColor: props.iFontColor,
    navBarTitleFontSize: props.iFontSize
}));


//返回上一页
const onClickLeft = () => history.back();

function isWeChat() {
    const ua = window.navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i)?.[0] === 'micromessenger';
}

//关闭按钮
const onClickRight = () => {
    if (isWeChat()) {
        document.addEventListener('WeixinJSBridgeReady', () => {
            window.WeixinJSBridge?.call('closeWindow');
        }, false);
        window.WeixinJSBridge?.call('closeWindow');
    } else {
        //h5
        window.parent.postMessage({ type: "ClosedCustomKf" }, "*");

        //ios
        window.webkit?.messageHandlers?.ClosedCustomKf?.postMessage('close')

        //安卓
        window.AndroidCallBack?.ClosedCustomKf();

        //浏览器
        window.history.back();
    }
};


//动态获取导航栏占位符的高度
const placeholderHeight = ref('46px');

// 在组件挂载后动态获取并设置高度
onMounted(() => {
    nextTick(() => {
        const navBar = document.querySelector('.van-nav-bar');
        if (navBar) {
            const actualHeight = (navBar as HTMLElement).offsetHeight + 'px';
            placeholderHeight.value = actualHeight;
        }
    });
});
</script>

<template>
    <van-config-provider :theme-vars="themeVars">
        <van-nav-bar v-bind="$attrs" :title="iTitle" :fixed="iFixed" :placeholder="iFixed" safe-area-inset-top :class="{ 'fixed-nav': iResetyle }">
            <template v-for="(value, name) in slots" #[name]="scope">
                <slot :name="name" v-bind="scope || {}"></slot>
            </template>
            <template #left>
                <van-icon name="arrow-left" size="5.333vmin" class="m-r-[35px] m-l-[24px]" @click="onClickLeft" v-if="leftArrow" />
                <van-icon name="cross" size="5.3333vmin" @click="onClickRight" class="w-10vmin" />
                <slot name="leftExtension"></slot>
            </template>
        </van-nav-bar>
    </van-config-provider>
</template>

<style lang="scss" scoped>
:deep(.fixed-nav .van-nav-bar__left) {
    padding: 24px;
}

:deep(.fixed-nav .van-nav-bar__right) {
    padding: 24px;
}
:deep(.van-nav-bar__left){
    padding:0;
}
:deep(.van-nav-bar__right){
    padding:0;
}
:deep(.van-hairline--bottom::after) {
    display: none;
}

:deep(.van-nav-bar) {
    z-index: 999;
}

:deep(.van-nav-bar__title) {
    font-weight: 500;
}

:deep(.van-nav-bar__placeholder) {
    height: v-bind(placeholderHeight) !important;
}
</style>